<div data-role="view" data-title="Maybanhang.Net" id="product-list" data-layout="mobile-view" data-init="initProductList">
    <header data-role="header">
        <div data-role="navbar">
            <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>            
            <span data-role="view-title"></span>
            <a data-align="right" data-role="button" class="nav-button" href='#index'>Home</a>            
        </div>         
    </header>
    <ul data-role="listview" data-style="inset" data-type="group" >
        <li>            
            <ul id='list-product'>                
                
            </ul>
        </li>        
    </ul>
    <footer data-role="footer">
    	<div class="search-container">         	
         	<div style="height: 2px;"></div>
            <input type="text" class="search-text" placeholder="Tìm kiếm hàng hóa" id="text_search_product"/>
            <a data-role="button" data-icon="search" data-click="productSearch"></a>
            <a data-role="button" data-icon="history" data-click="resetProductSearch" id="product_reset_search"></a>
        </div>
    </footer>
    <script id="list-product-item-template" type="text/x-kendo-template">    	
	        <a href='site/productDetail?id=#= productId #'>
	        	<div style="margin: 4px;">
		        <img class="product-list-image" src="site/productImage/#= productId #" /><span class="product-list-name">#= productName #
		        <div class="metadata">
		            <span class="product-list-category">Nhóm: #= categoryName #</span>
		            |
		            <span  class="product-list-balance">Tồn: #= productBalance #</span>
		        </div>
		        <div class="metadata">
		            <span class="product-list-price">Giá: #= formatAmount(price) #</span>
		        </div>
		        </div>
	        </a>
	</script>
    <script>
    	function productSearch()
    	{
    		var text = $.trim($("#text_search_product").val());
    		 if (text !="")
    		 {    		 	
    		 	//$("#product_reset_search").show();
    		 }
    		 initProductList();
    	}
    	function resetProductSearch()
    	{
    		 var text = $.trim($("#text_search_product").val());
    		 if (text !="")
    		 {
    		 	$("#text_search_product").val("");
    		 	//$("#product_reset_search").hide();
    		 	initProductList();
    		 	
    		 }
    	}
    	function initProductList()
    	{
    		app.showLoading();
    		pageNumber = 0;
    		
    		var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                pageSize: 20,
                transport: {
                    read: {
                        url: "service/product", // the remote service url - Twitter API v1.1
                        dataType: "json" // JSONP (JSON with padding) is required for cross-domain AJAX
                    },
                    parameterMap: function(options) {
	                    options = {	                        
	                        size: options.pageSize
	                    };
	                    if (paged) {	                        
	                         paged = false;
	                    }
	                    else
	                    {
	                    	pageNumber = 0;
	                    	
	                    	
	                    }
	                    options["page"] = pageNumber;
	                    options["keyword"] = $("#text_search_product").val();
	                    return options;
	                }
                },
                schema: { // describe the result format
                    parse: function(response) {
	                    pageNumber = pageNumber +1;   
	                    app.hideLoading();                		
	                    return response;
	                },
                    // the data which the data source will be bound to is in the "results" field
                    data: function(data) {
                        return data || [];
                    },
                    total: function() { return 1000; }
                }
            });
			paged = false;
	        $("#list-product").kendoMobileListView({
	            dataSource: dataSource,
	            pullToRefresh: true,
	            appendOnRefresh: false,
	            endlessScroll: true,
	            endlessScrollParameters: function() {	            	
	                paged = true;
	            },
	            template: $("#list-product-item-template").text()
	        });
    	}
    	/*
    	$("#text_search_product").keyup(function() {
    		//alert('keypress');
    		clearTimeout();
		   	setTimeout('initProductList()',500);
		});
		*/
		/*
		$("#text_search_product").change(function() {
			//alert('change');
    		clearTimeout();
		   	setTimeout('initProductList()',500);
		});
		*/
    </script>
</div>